<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.0/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
</head>
<body>
<h1>WebSocket Example</h1>
<input id="message" type="text" placeholder="Enter message"/>
<button onclick="sendMessage()">Send</button>
<div id="response"></div>

<script>
    var stompClient = null;
    function connect() {
        var userName = 'swan';
        var socket = new SockJS('/ws'); // Connect to the WebSocket endpoint
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
            console.log('Connected: ' + frame);
            stompClient.subscribe(`/user/${userName}/queue/message`, function (message) {
                console.log("receive subscribe message:",message);
                showResponse(message.body); // Handle incoming messages
            });
        });
    }

    function sendMessage() {
        var message = document.getElementById('message').value;
        stompClient.send("/app/send", {}, message); // Send message to the server
    }

    function showResponse(message) {
        debugger
        document.getElementById('response').innerHTML += "<p>" + message + "</p>";
    }

    connect(); // Establish connection on page load
</script>
</body>
</html>
